<template>
  <div class="card-box">
    <div class="home-title">高频预警点前十位</div>
    <div class="chart-wrapper">
      <div id="hignFrequencyWarning"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    setOption() {
      let xAxisData = this.chartData.map((i) => {
        return i.type;
      });

      let yAxisData = this.chartData.map((item, index) => {
        // if (index == 0) {
        //   return {
        //     value: item.num,
        //     itemStyle: {
        //       color: "rgb(245,108,108)",
        //     },
        //   };
        // }
        // if (index == 1) {
        //   return {
        //     value: item.num,
        //     itemStyle: {
        //       color: "rgb(230,162,60)",
        //     },
        //   };
        // }
        return item.num;
      });

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              // rotate: -10,
              formatter: function (value, index) {
                if (index % 2 != 0) {
                  return "\n\n" + value;
                } else {
                  return value;
                }
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "节点预警数",
            type: "bar",
            barWidth: "20",
            data: yAxisData,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255,95,93,0.1)" },
                { offset: 1, color: "rgba(255,95,93,0.6)" },
              ]),
            },
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
  mounted() {
    let dom = document.getElementById("hignFrequencyWarning");
    this.chart = this.$echarts.init(dom);

    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  watch: {
    chartData(newVal) {
      if (newVal && this.chart) {
        this.setOption();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";
</style>